<script setup lang="ts">
import { computed,defineEmits } from "vue";
const emit = defineEmits(['cancelFavorite'])
const props = defineProps({
  cardItem: {
    type: Object,
    default: () => {},
  },
  cardIndex: {
    type: Number,
    default: 0,
  },
});
//console.log("props", props);
const isImg = (url = "") => {
  if (
    url.indexOf(".png") > -1 ||
    url.indexOf(".jpg") > -1 ||
    url.indexOf(".jpeg") > -1 ||
    url.indexOf(".webp") > -1
  ) {
    return true;
  }
  return false;
};
const filterPlayCount = computed(() => {
  return (str) => {
    let arr = str?.split(",");
    if (isImg(arr[0])) {
      return arr[0];
    }
    return arr[0] + "?x-oss-process=video/snapshot,t_0,f_jpg";
  };
});

const getFilterPlayCount = () => {
  if (props.cardItem.videos) {
    return props.cardItem.videos + "?x-oss-process=video/snapshot,t_0,f_jpg";
  }
  return props.cardItem.images;
};
const cancelFavorite=(cardItem:any)=>{
  //console.log(cardItem,"取消收藏");
  emit('cancelFavorite', cardItem.id)
}
</script>

<template>
  <view class="card-box crosswise">
    <!-- <image
      class="rank-bg"
      src="@/static/images/collect_yi_big.png"
      v-if="cardIndex == 0"
    />
    <image
      class="rank-bg"
      src="@/static/images/collect_er_big.png"
      v-if="cardIndex == 1"
    />
    <image
      class="rank-bg"
      src="@/static/images/collect_san_big.png"
      v-if="cardIndex == 2"
    /> -->

    <!-- <view class="ranking">
      <image src="@/static/images/collect_yi.png" v-if="cardIndex == 0" />
      <image src="@/static/images/collect_er.png" v-if="cardIndex == 1" />
      <image src="@/static/images/collect_san.png" v-if="cardIndex == 2" />
      <view class="rank-text" v-if="cardIndex > 2">{{ cardIndex + 1 }}</view>
    </view> -->
    <view class="info-box crosswise">
      <view>
        <image :src="getFilterPlayCount()" class="info-img" />
        <!-- <image src="@/static/images/bg.png" class="info-img" /> -->
      </view>
      <view class="info-menu">
        <view class="head-box">
          <view>
            <image
              :src="cardItem.headSculpture"
              class="head-img"
              v-if="cardItem.headSculpture"
            />
            <text class="head-name">{{ cardItem.userName }}</text>
          </view>
          <view class="cancelfavorite" @click.stop="cancelFavorite(cardItem)">
            取消收藏
          </view>
        </view>
        <view class="describe two-row">{{ cardItem.describes }}</view>
        <view class="info-bot crosswise-sp">
          <view class="price-box">
            <text class="ico">￥</text>
            <text>{{ cardItem.currentPrice }}</text>
          </view>
          <view class="num">{{ cardItem.num }}人收藏</view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
//
.card-box {
  position: relative;
  margin-bottom: 24rpx;
  padding: 30rpx 20rpx;
  border-radius: 20rpx;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 2rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.1);

  .rank-bg {
    position: absolute;
    top: 8rpx;
    right: 0;
    width: 188rpx;
    height: 188rpx;
  }

  .ranking {
    width: 60rpx;
    height: 60rpx;
    margin-right: 20rpx;

    image,
    .rank-text {
      width: 60rpx;
      height: 60rpx;
    }

    .rank-text {
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(190, 190, 190, 1);
      font-size: 40rpx;
    }
  }

  .info-box {
    width: 100%;

    .info-img {
      width: 160rpx;
      height: 160rpx;
      border-radius: 16rpx;
    }

    .info-menu {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 100%;
      height: 160rpx;
      margin-left: 20rpx;

      .head-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .cancelfavorite{
          color: #9292af;
          font-size: 24rpx;
          border: 1px solid #9292AF;
          padding: 12rpx 14rpx;
          border-radius: 14rpx;
        }
        .head-img {
          width: 34rpx;
          height: 34rpx;
          margin-right: 10rpx;
          border-radius: 50%;
        }

        .head-name {
          color: rgba(79, 79, 79, 1);
          font-size: 24rpx;
        }
      }

      .describe {
        margin: 4rpx 0;
        color: rgba(16, 16, 16, 1);
        font-size: 28rpx;
      }

      .info-bot {
        width: 100%;

        .price-box {
          color: rgba(243, 96, 78, 1);
          font-size: 32rpx;

          .ico {
            font-size: 24rpx;
          }
        }

        .num {
          color: rgba(154, 154, 154, 1);
          font-size: 24rpx;
        }
      }
    }
  }
}
</style>
